<%--
  Created by IntelliJ IDEA.
  User: FWJ
  Date: 2021/7/4
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <title>员工列</title>

    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
<%-- 搭建显示页面 --%>
<div class="container">
    <%-- 标题行--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
    </div>

    <%-- 按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger"> 删除</button>

        </div>
    </div>

    <%-- 表格数据 --%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操作</th>
                    </tr>

                </thead>
                <tbody>`

                </tbody>


            </table>
        </div>
    </div>
    <%-- 下一页 --%>
    <div class="row">
        <div class="col-md-6">
            当前第#页,共#页，共#条记录
        </div>

        <div class="col-md-6">


        </div>
    </div>
</div>
<script type="text/javascript">
    //1、页面加载完成后，直接发送一个ajax请求，要到分页数据
    $(function () {
        $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn=1",
            type: "GET",
            success: function (result) {
                //console.log(result);
                //1、在页面解析json
                build_emp_table(result);

                //2、解析并显示分页信息

            }
        });
    });

    function build_emp_table(result) {
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender == 'M' ? "男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);


            /*
            * <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                                删除
                            </button>
            *
            * */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
                .append("<span></span>")
                .addClass("glyphicon glyphicon-align-left")
                .append("编辑");
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append("<span></span>")
                .addClass("glyphicon glyphicon-align-left")
                .append("删除");
            console.log("aaaaaa")
            $("<tr></tr>").append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(editBtn)
                .append(delBtn)
                .appendTo("#emps_table tbody");
        });
    }

    function build_page_nav(result) {

    }
</script>
</body>
</html>
